<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script>
        function tipUsername(){
            document.getElementById("s1").innerHTML = "<span style='color:purple;font-size: 12px'>用户名由英文字母、数字、下划线组成,长度为4-16个字符</span>"
        }
        function checkUsername(){
            let regExp = /^\w{4,16}$/;
            let username = document.getElementById("username").value;
            if(regExp.test(username)){
                document.getElementById("s1").innerHTML = "<span style='color:green;font-size: 12px'>用户名格式正确</span>"
                return true;
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red;font-size: 12px'>您输入的用户名格式有误</span>"
                return false;
            }
        }
        function tipPassword(){
            document.getElementById("s2").innerHTML = "<span style='color:purple;font-size: 12px'>密码长度6-8位,必须包含字母、数字</span>";
        }
        function checkPassword(){
            let regExp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,8}$/;
            let pwd = document.getElementById("password").value;
            if(regExp.test(pwd)){
                document.getElementById("s2").innerHTML = "<span style='color:green;font-size: 12px'>密码格式正确</span>";
                return true;
            } else{
                document.getElementById("s2").innerHTML = "<span style='color:red;font-size: 12px'>密码格式有误</span>";
                return false;
            }
        }
        function tipPhone(){
            document.getElementById("s3").innerHTML = "<span style='color:purple;font-size: 12px'>请输入11位手机号码以13,15,19开头</span>";
        }
        function checkPhone(){
            let regExp = /^1[359]\d{9}$/;
            let phone = document.getElementById("phone").value;
            if(regExp.test(phone)){
                document.getElementById("s3").innerHTML = "<span style='color:green;font-size: 12px'>手机号格式正确</span>";
                return true;
            } else{
                document.getElementById("s3").innerHTML = "<span style='color:red;font-size: 12px'>手机号格式有误</span>";
                return false;
            }
        }
        function tipEmail(){
            document.getElementById("s4").innerHTML = "<span style='color:purple;font-size: 12px'>请输入qq邮箱地址</span>";
        }
        function checkEmail(){
            let regExp = /^\d{5,13}@qq\.com$/;
            let email = document.getElementById("email").value;
            if(regExp.test(email)){
                document.getElementById("s4").innerHTML = "<span style='color:green;font-size: 12px'>邮箱格式正确</span>";
                return true;
            } else{
                document.getElementById("s4").innerHTML = "<span style='color:red;font-size: 12px'>邮箱格式有误</span>";
                return false;
            }
        }
        function tipPersonId(){
            document.getElementById("s5").innerHTML = "<span style='color:purple;font-size: 12px'>请输入18位数字身份证号码</span>";
        }
        function checkPersonId(){
            let regExp = /^\d{18}$/;
            let id = document.getElementById("personId").value;
            if(regExp.test(id)){
                document.getElementById("s5").innerHTML = "<span style='color:green;font-size: 12px'>身份证格式正确</span>";
                return true;
            } else{
                document.getElementById("s5").innerHTML = "<span style='color:red;font-size: 12px'>身份证格式有误</span>";
                return false;
            }
        }
        function checkForm(){
            if(checkUsername()&&checkPersonId()&&checkPassword()&&checkPhone()&&checkEmail()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<form action="http://www.baidu.com/" onsubmit="return checkForm()">
    用户名:<input type="text" id="username" onfocus="tipUsername()" onblur="checkUsername()"><span id="s1"></span><br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" id="password" onfocus="tipPassword()" onblur="checkPassword()"><span id="s2"></span><br>
    手机号:<input type="text" id="phone" onfocus="tipPhone()" onblur="checkPhone()"><span id="s3"></span><br>
    邮&nbsp;&nbsp;&nbsp;箱:<input type="text" id="email" onfocus="tipEmail()" onblur="checkEmail()"><span id="s4"></span><br>
    身份证:<input type="text" id="personId" onfocus="tipPersonId()" onblur="checkPersonId()"><span id="s5"></span><br>
    <input type="submit" value="提交">
</form>
</body>
</html>